<template>
    <div>
        <div class="top">
            <Search :side="side"></Search>
            <!--位置排序等-->
            <div class="cztj"  @click="muneselect($event)">
                <div class="bor-right">
                    <span ref="weizhi" @click="resetselect">位置</span>
                    <span class="fa fa-angle-down"></span>
                </div>
                <div class="bor-right" ref="qwe">
                    <span ref = "saixuan" @click="resetselect">筛选</span>
                    <span class="fa fa-angle-down"></span>
                </div>
                <div>
                    <span>排序</span>
                    <span class="fa fa-angle-down"></span>
                </div>
            </div>
        </div>

        <!--房子列表-->
            <div class="main" ref="list"  @scroll="mainscroll">
                    <div v-for="h in houselist" >
                        <router-link :to="'/houseinfo/'+h._id">
                            <div class="housemenu">
                                <div><img :src="h.img" class="pic"></div>
                                <div class="msg">
                                    <p class="text2">{{h.title}}</p>
                                    <p>
                                        <span class="text">{{h.address}}</span>
                                        <span class="text1">{{h.price}}</span>
                                    </p>
                                    <p class="text">{{h.jiedao}}</p>
                                    <p  class="text1">{{h.jieshao}}</p>
                                </div>
                            </div>
                        </router-link>
                    </div>
            </div>

        <!--条件选择-->
        <transition name="select">
            <div class="select" @click="selecthouse($event)"  v-show="show1" >
                <div class="select-left"  ref="select">
                    <div v-for="m in munelist" >{{m}}</div>
                </div>
                <div class="select-right" v-show="show">
                    <div v-for="a in dizhi" @click="selected($event)">{{a}}</div>
                </div>
            </div>
        </transition>

  
   
        <!--回到首页和顶部-->
        <div class="backtop" ref="backtop" @click="backtop">
            <span class="fa fa-hand-o-up" style="font-size:20px"></span>
            <br>
            <span class="txt5">返回顶部</span>
        </div>
        <router-link to="/">
            <div class="backhoem">
                <span class="fa fa-home" style="font-size:20px"></span>
                <br>
                <span class="txt5">首页</span>
            </div>
        </router-link>
        
       <!--蒙灰层和侧边栏-->
       <transition name="in">
           <Leftside class="cebianlan" v-show="side"></Leftside>
       </transition>
       <transition name="pagein">
            <div class="shaow" v-show="side"  @click="disapper"></div>
       </transition>
       
    </div>
</template>

<script>
import Search from '../components/Search.vue'
import Leftside from '../components/Leftside.vue'
import Bus from "../utils/Bus.js";
import axios from 'axios'
    export default{
        computed:{
            type:function(){
                return this.$route.params.type;
            }
        },
        data:function(){
            return {
               houselist:[],
               select:"",
               addresslist:[],
               dizhi:[],
               show:false,
               munelist:[],
               searchkey:"",
               show1:false,
               side:false,
               avatar:"",
               aa:[],
               bb:[],
               cc:[],
               dd:[],
               hasnext:"",
               all:[],
               scrollh:"",
               aaa:"筛选",
               o:[],
               sort:0,
               searchname:""
            }
        },
        components:{
            Search,
            Leftside
        },
        mounted:function(){
            // 请求房子的数据
            this.request();
            // 子组件传给父组件的值
            Bus.$on("houselist",(e)=>{
                this.houselist = e;
            }); 
            Bus.$on("showleftside",(e)=>{
                this.side = e;
            }); 
            Bus.$on("searchname",(e)=>{
                this.searchname = e;
            }); 
            this.http.get("house/all")
            .then(res=>{
                this.all = res.data;
            });
        },
        methods:{
            // 请求房子列表
            request:function(){
                // console.log(this.houselist.length);
                var n = this.houselist.length/6;
                // console.log(n);
                this.http.get("/house",{
                    params:{page:n,type:this.type}
                })
                .then(res=>{
                    this.hasnext = res.data.hasnext;
                    this.houselist =this.houselist.concat(res.data.data);
                    this.houselist.forEach(function(e) {
                        if(this.aa.indexOf(e.address) == -1){
                            this.aa.push(e.address)
                        }
                    }.bind(this));                    
                });
            },
            requestsort:function(){
                // console.log(this.houselist.length);
                var n = this.houselist.length/6;
                // console.log(n);
                this.http.get("/house/sort",{
                    params:{page:n,type:this.type}
                })
                .then(res=>{
                    this.hasnext = res.data.hasnext;
                    this.houselist =this.houselist.concat(res.data.data);
                    this.houselist.forEach(function(e) {
                        if(this.aa.indexOf(e.address) == -1){
                            this.aa.push(e.address)
                        }
                    }.bind(this));                    
                });
            },
            // 选择位置，排序等，显示位置排序等详细选项
            muneselect:function(e){
                if(e.target.innerText=="位置"){
                    this.munelist =["不限","区域","地铁"];
                    this.show1 =true;
                   this.show =false;
                   var select = this.$refs.select;
                   select.style="width:30%";
                }
                if(e.target.innerText=="筛选"){
                    this.munelist =["价格","类型","户型"];
                    this.show1 =true;
                    this.show =false;
                    var select = this.$refs.select;
                   select.style="width:30%";
                }
                if(e.target.innerText=="排序"){
                    this.munelist =["默认","价格由高到低","价格由低到高","开盘时间由远到近","开盘时间由近到远","关注度由高到低","关注度由低到高"];
                   this.show1 =true;
                   this.show =false;
                   var select = this.$refs.select;
                   select.style="width:100%";
                }
            },
            // 选择查询条件
            selecthouse:function(e){
                
                if(e.target.innerText=="不限"){
                    this.$refs.weizhi.innerHTML = "位置";
                    this.show1 = false;
                    this.show = false;
                    this.dizhi=[],
                    this.http.get("/house",{
                        params:{type:this.type}
                    })
                    .then(res=>{
                        this.houselist = res.data.data;
                        
                    });
                }
                if(e.target.innerText=="区域"){
                    this.dizhi=[];
                    this.show = true;
                    // e.target.style=" background-color: none;"
                   
                    this.all.forEach(function(e) {
                        if(this.aa.indexOf(e.address) == -1){
                            this.aa.push(e.address)
                        }
                    }.bind(this));
                    this.dizhi=this.aa;
                    // console.log(this.dizhi);
                }
                if(e.target.innerText=="地铁"){
                    // console.log(this.dizhi)
                    this.show = true;
                    this.dizhi=[];
                    this.all.forEach(function(e) {
                        if(this.bb.indexOf(e.jiaotong) == -1){
                            this.bb.push(e.jiaotong);    
                        }
                    }.bind(this));
                    this.dizhi = this.bb;
                    // console.log(this.dizhi)
                }
                if(e.target.innerText=="价格"){
                    this.show = true;
                    this.dizhi=[];
                    this.all.forEach(function(e) {
                        if(this.dd.indexOf(e.jiage) == -1){
                            this.dd.push(e.jiage)
                        }
                    }.bind(this));
                    this.dizhi = this.dd;
                }
                if(e.target.innerText=="类型"){
                    this.show = true;
                    this.dizhi=[];
                    this.all.forEach(function(e) {
                        if(this.cc.indexOf(e.class) == -1){
                            this.cc.push(e.class)
                        }
                    }.bind(this));
                     this.dizhi = this.cc;
                }
                if(e.target.innerText=="默认"){
                    this.show1 = false;
                    this.sort = 0;
                    this.http.get("/house",{
                        params:{type:this.type}
                    })
                    .then(res=>{
                        // console.dir(res.data.data);
                        this.houselist = res.data.data;
                    });
                }
                if(e.target.innerText=="价格由高到低"){
                    // console.log(e.target.innerText)
                    this.show1 = false;
                    this.sort = 1;
                    this.http.get("/house/sort",{
                        params:{type:this.type}
                    })
                    .then(res=>{
                        this.houselist=res.data.data
                    });
                }
                if(e.target.innerText=="价格由低到高"){
                     this.show1 = false;
                     this.sort = 0;
                    this.http.get("/house",{
                        params:{type:this.type}
                    })
                    .then(res=>{
                        this.houselist = res.data.data;
                    });
                }
            },
            // 按照用户选择的条件进行查询
            selected:function(e){
                this.searchkey = e.target.innerText;
                // 按照用户选择的条件查询
                this.http.post("/house/hrea",{"word":this.searchkey})
                .then(res=>{
                    // console.dir(res.data.data)
                        this.houselist = res.data.data;                    
                });
                this.show =false;
                this.show1 =false;
                this.houselist =[];
            },    
            // 滚动事件监听函数,下拉加载更多
            mainscroll:function(e){
                if(this.sort==0){
                    this.scrollh = e.target.scrollTop;
                    if(e.target.scrollHeight-e.target.offsetHeight==e.target.scrollTop){
                        this.request()
                    }
                    if(e.target.scrollTop>200){
                        // var back = this.$refs.backtop;
                        // console.log(back)
                        this.$refs.backtop.style="opacity: 1";
                    }else{
                        this.$refs.backtop.style="opacity: 0";
                    }
                }else{
                     this.scrollh = e.target.scrollTop;
                    if(e.target.scrollHeight-e.target.offsetHeight==e.target.scrollTop){
                       this.requestsort();
                    }
                    if(e.target.scrollTop>200){
                        // var back = this.$refs.backtop;
                        // console.log(back)
                        this.$refs.backtop.style="opacity: 1";
                    }else{
                        this.$refs.backtop.style="opacity: 0";
                    }
                }
                // console.dir(e);
                
                
            },
            // 回到顶部
            backtop:function(){
                var timer;
                var a = this;
                function update(){
                    a.$refs.list.scrollTop-=50;
                     timer = requestAnimationFrame(update);
                    if( a.$refs.list.scrollTop<=0){
                        cancelAnimationFrame(timer);
                    }
                }
                update();
            },
            resetselect:function(){
                this.show1 = true;
            },
            // 蒙灰层侧边栏消失
            disapper:function(){
                this.side =!this.side;
            },

        },
        activated:function(){
            // location.reload();
            var list = this.$refs.list;
            list.scrollTop = this.scrollh;
        }
        
    }
</script>

<style scoped>
.cebianlan{
    position: absolute;
    top:0;
    /*border: 1px solid black;*/
    width: 90%;
    z-index: 10
}
.shaow{
    background-color: rgba(0, 0, 0, 0.5)
}
.txt5{
    font-size: 10px;
}
.backtop{
    height: 53px;
    width: 53px;
    position: absolute;
    bottom: 100px;
    right:10px;
    text-align: center;
    border-radius: 50%;
    padding: 4px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}
.backhoem{
    height: 53px;
    width: 53px;
    position: absolute;
    bottom: 40px;
    right:10px;
    text-align: center;
    padding: 4px;
    border-radius: 50%;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}
.aa{
    position: absolute;
    top:0;
    right: 0;
}
.shaow{
    height: 100%;
    border: 1px solid black
}
.select{
    position: fixed;
    top: 82px;
    width: 100%;
    height: 263px;
    cursor: pointer;
    background-color: #eeeeee;
    display: flex;
}
.select-left{
    width: 30%;
    text-align: center;
}
.select-right{
    width: 70%;
    /*height: 263px;*/
    overflow-y: scroll;
    background-color: white;
}
.select-left div{
    height: 38px;
    padding: 4px;
}
.select-right div{
    height: 38px;
    padding: 4px;
    border-bottom: 1px  solid #eeeeee;
}
.top{
    position: fixed;
    width: 100%;
}
.main{
    overflow-y: scroll;
    padding-top:84px; 
    height:100Vh;
    background-color: white;
}
.main a{
    text-decoration: none;
}
.cztj{
    height: 38px;
    line-height: 38px;
    display: flex;
    text-align: center;
    background-color: white;
    border-bottom: 1px solid #999999;
}
.cztj div{
    width: 33.33%;
    font-size: 12px;
    color: #666666;
}
.bor-right{
    border-right: 1px  solid #999999;
}
.housemenu{
    display: flex;
    padding: 8px 10px;
}
.housemenu p{
    margin: 0;
}
.msg{
    margin-left: 10px;
}
.pic{
    width: 100px;
    height: 75px;
}
.text{
    color: #666666;
    font-size: 12px;
}
.text1{
    color: #f50;
    font-size: 12px;
}
.text2{
    font-size: 14px;
}
.shaow{
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top:0;
}

</style>